window.onload = function () {
    //渲染页面

    //渲染视频进页面
    var vid = document.getElementById('video_btn');
    var vidLeft = vid.getElementsByClassName('left1')[0];

    vidLeft.innerHTML = ' <video src="' + videoDetail.src + '" controls poster="' + videoDetail.poster + '"></video>'

    //视频旁边页面 目录
    var vidRight1 = vid.getElementsByClassName('right1')[0];
    var vidRight1List = vidRight1.getElementsByClassName('list')[0];
    var vidRight1Html = ''
    for (var i = 0; i < classList.length; i++) {

        vidRight1Html += '<div><p class="clearfix">' + classList[i].title + ' （含' + classList[i].num + '期）</p><ul></ul></div>';

    }
    vidRight1List.innerHTML = vidRight1Html;



    var vidRight1Uls = vidRight1.getElementsByTagName('ul');
    for (var i = 0; i < classList.length; i++) {

        var vidRight1UlHtml = '';
        for (var j = 0; j < classList[i].list.length; j++) {
            vidRight1UlHtml += '<li tag="' + classList[i].list[j].src + '">\
            <span>' + classList[i].list[j].name + '</span>\
            <span class="iconfont">&#xeb23;</span>\
        </li>'


        }
        vidRight1Uls[i].innerHTML = vidRight1UlHtml;
    }

    var vidRight1UlsLi = vidRight1Uls[0].getElementsByTagName('li')[0];

    vidRight1UlsLi.className = 'active';
    //评论页面渲染

    var visDscuss = document.getElementsByClassName('discuss')[0];
    var visDscussUl = visDscuss.getElementsByTagName('ul')[0];
    var visDscussHtml = ''
    for (var i = 0; i < commentList.length; i++) {
        visDscussHtml += '<li >\
        <p class="clearfix">\
            <img src="' + commentList[i].src + '"></img>\
            <span>' + commentList[i].name + '</span>\
            <span>' + commentList[i].time + '</span>\
        </p>\
        <p>\
            ' + commentList[i].content + '\
        </p>\
    </li>'
    }
    visDscussUl.innerHTML = visDscussHtml;














    //渲染讲师介绍页面
    var teacher = document.getElementById('teacher');
    var teacherDiv = teacher.getElementsByTagName('div')[0];

    teacherDiv.innerHTML = '<span></span>\
    <p>\
        <span>' + videoDetail.teacher + '</span>\
        <span>' + videoDetail.teacherTitle + '</span>\
    </p>\
    <span></span>\
    <p>' + videoDetail.introduce + '\
    </p>';


    //list列表页渲染 

    var catlog = document.getElementsByClassName('catlog')[0];
    var catlogDivHtml = '';



    for (var i = 0; i < classList.length; i++) {

        catlogDivHtml += ' <div><p class="clearfix"><b>' + classList[i].title + ' （含' + classList[i].num + '期）</b><b class="iconfont">&#xeb24;</b></p><ul></ul></div>';

    }
    catlog.innerHTML = '<div id="fx">' + catlogDivHtml + '</div>';



    var catlogUls = catlog.getElementsByTagName('ul');
    for (var i = 0; i < classList.length; i++) {

        var catlogUlHtml = '';
        for (var j = 0; j < classList[i].list.length; j++) {
            catlogUlHtml += '<li tag="' + classList[i].list[j].src + '">\
            <span class="iconfont">&#xeb23;</span>\
            <span>' + classList[i].list[j].name + '</span>\
            <span>' + classList[i].list[j].time + '开播</span>\
            <span>开播提醒</span>\
            </li>';


        }
        catlogUls[i].innerHTML = catlogUlHtml;
    }



    //课程详情大图
    var catlogDetail = document.getElementsByClassName('detail')[0];
    catlogDetail.innerHTML = '<img src="' + classImgList[0] + '" alt="">'


    //视频播放页渲染








    //视频播放
    //点击免费试学出来目录界面和视频播放页面

    var vidLeft1 = vid.getElementsByClassName('left1')[0];
    var video = vidLeft1.getElementsByTagName('video')[0];
    var vidRight1 = vid.getElementsByClassName('right1')[0];
    var videoBtn = vid.getElementsByClassName('btn')[0];



    //点击选项卡切换目录和评论
    var vidRight1Btns = vidRight1.getElementsByTagName('button');

    var vidRight1List = vidRight1.getElementsByClassName('list')[0];
    var vidRight1Discuss = vidRight1.getElementsByClassName('discuss')[0];

    vidRight1Btns[0].onclick = function () {
        vidRight1List.style.display = 'block';
        vidRight1Discuss.style.display = 'none';
        vidRight1Btns[0].className = 'cur';
        vidRight1Btns[1].className = '';
    }
    vidRight1Btns[1].onclick = function () {
        vidRight1List.style.display = 'none';
        vidRight1Discuss.style.display = 'block';
        vidRight1Btns[0].className = '';
        vidRight1Btns[1].className = 'cur';
    }

    //点击list目录下的每一个li 切换到高亮状态 清除其它所有的高亮状态
    var vidRight1ListLis = vidRight1List.getElementsByTagName('li');
    for (var i = 0; i < vidRight1Uls.length; i++) {
        vidRight1Uls[i].tag = i;

    }

    for (var j = 0; j < vidRight1ListLis.length; j++) {
        vidRight1ListLis[j].index = j;

        vidRight1ListLis[j].onclick = function () {


            for (var i = 0; i < vidRight1ListLis.length; i++) {
                vidRight1ListLis[i].className = '';
            }
            video.src = this.getAttribute('tag');
            video.play();
            this.className = 'active';
            for (var i = 0; i < catalogCataLis.length; i++) {
                catalogCataLis[i].style.background = '';
                catalogCataLis[i].lastElementChild.style.display = '';
                catalogCataLis[i].lastElementChild.previousElementSibling.style.display = '';
            }

            document.documentElement.scrollTop = video.offsetTop;

            catalogCataLis[this.index].style.background = '#e5f3ef';
            catalogCataLis[this.index].lastElementChild.style.display = 'block';
            catalogCataLis[this.index].lastElementChild.previousElementSibling.style.display = 'none';
            /* console.log(catalogCataLis[this.index].parentNode.previousElementSibling.lastElementChild.innerHTML);
            if (catalogCataLis[this.index].parentNode.previousElementSibling.tag == 1) {
                catalogCataLis[this.index].parentNode.previousElementSibling.lastElementChild.innerHTML = "&#xeb24";
                catalogCataLis[this.index].parentNode.style.display = 'block';
                catalogCataLis[this.index].parentNode.previousElementSibling.tag = 2;
            } */
            console.log(this.parentNode.tag);
            //点击上面的列表中的li，让下面的对应的ul一定展开，不用加判断 ，直接确定展开
            catalogCataUl[this.parentNode.tag].style.display = 'block';
            catalogCataPs[this.parentNode.tag].lastElementChild.innerHTML = '&#xeb24;'
            catalogCataPs[this.parentNode.tag].tet = 1;

        }

    }
    /*  vidRight1List.onclick = function (evs) {

         var ev = window.event || evs;
         var tar = ev.target || ev.srcElement;
         console.log(tar.getAttribute('tag'));



         for (var i = 0; i < vidRight1ListLis.length; i++) {
             vidRight1ListLis[i].className = '';

         }

         if (tar.nodeName == 'LI') {
             video.src = tar.getAttribute('tag');
             video.play();
             tar.className = 'active';
         }
         if (tar.nodeName == 'SPAN') {
             video.src = tar.parentNode.getAttribute('tag');
             video.play();
             tar.parentNode.className = 'active';

         }
     } */

    //点击发表按钮 发表评论
    var vidRight1Text = vidRight1Discuss.getElementsByTagName('textarea')[0];
    var vidRight1DiscussUl = vidRight1Discuss.getElementsByTagName('ul')[0];

    vidRight1Btns[2].onclick = function () {

        var txt = vidRight1Text.value;

        var li = document.createElement('li');
        li.innerHTML = '<p class="clearfix"><img src="../img/login/user.png"></img><span>哈哈哈哈</span><span>21:12</span></p><p>' + txt + '</p>';
        var ol = vidRight1DiscussUl.firstElementChild || vidRight1DiscussUl.firstChild;
        if (vidRight1Text.value != '') {
            vidRight1DiscussUl.insertBefore(li, ol);
        }
        vidRight1Text.value = '';

    }






    //课程详情
    //选项卡切换目录和大图
    var catalog = document.getElementById('catalog');
    var catalogBtns = catalog.getElementsByTagName('button');
    var catalogCata = catalog.getElementsByClassName('catlog')[0];

    var catalogCataUl = catalogCata.getElementsByTagName('ul');

    catalogCataUl[3].style.display = 'none';
    catalogCataUl[4].style.display = 'none';

    var catalogDeta = catalog.getElementsByClassName('detail')[0];


    catalogBtns[0].onclick = function () {
        catalogCata.style.display = 'block';
        catalogDeta.style.display = 'none';
        catalogBtns[0].className = 'cur';
        catalogBtns[1].className = '';
    }
    catalogBtns[1].onclick = function () {
        catalogCata.style.display = 'none';
        catalogDeta.style.display = 'block';
        catalogBtns[0].className = '';
        catalogBtns[1].className = 'cur';
    }

    //点击的每个li标签 让其显示高亮效果
    var catalogCataLis = catalogCata.getElementsByTagName('li');

    var fx = document.getElementById('fx');
    catalogCataLis[0].style.background = '#e5f3ef';
    catalogCataLis[0].lastElementChild.style.display = 'block';
    catalogCataLis[0].lastElementChild.previousElementSibling.style.display = 'none';
    for (var j = 0; j < catalogCataLis.length; j++) {
        catalogCataLis[j].index = j;

        catalogCataLis[j].onclick = function () {



            for (var i = 0; i < catalogCataLis.length; i++) {
                catalogCataLis[i].style.background = '';
                catalogCataLis[i].lastElementChild.style.display = '';
                catalogCataLis[i].lastElementChild.previousElementSibling.style.display = '';
            }

            vidRight1List.scrollTop = this.offsetTop * parseInt(pbc.getStyle(fx, 'height')) / parseInt(pbc.getStyle(catalogCata, 'height')) - 20;


            // console.log(this.offsetTop * parseInt(pbc.getStyle(fx, 'height')) / parseInt(pbc.getStyle(catalogCata, 'height')));



            video.src = this.getAttribute('tag');
            video.play();

            document.documentElement.scrollTop = video.offsetTop;

            this.style.background = '#e5f3ef';
            this.lastElementChild.style.display = 'block';
            this.lastElementChild.previousElementSibling.style.display = 'none';


            for (var i = 0; i < vidRight1ListLis.length; i++) {
                vidRight1ListLis[i].className = '';

            }

            vidRight1ListLis[this.index].className = 'active';
        }
    }
    /* catalogCata.onclick = function (evs) {


        var ev = window.event || evs;
        var tar = ev.target || ev.srcElement;
        

        for (var i = 0; i < catalogCataLis.length; i++) {
            catalogCataLis[i].style.background = '';
            catalogCataLis[i].lastElementChild.style.display = '';
            catalogCataLis[i].lastElementChild.previousElementSibling.style.display = '';
        }
       
        if (tar.nodeName == 'LI') {
            
            video.src = tar.getAttribute('tag');
            video.play();
            
            document.documentElement.scrollTop = video.offsetTop;

            tar.style.background = '#e5f3ef';
            
            tar.lastElementChild.style.display = 'block';
            tar.lastElementChild.previousElementSibling.style.display = 'none';
        }
        if (tar.nodeName == 'SPAN') {
            video.src = tar.parentNode.getAttribute('tag');
            video.play();
            document.documentElement.scrollTop = video.offsetTop;
            tar.parentNode.style.background = '#e5f3ef';
            tar.parentNode.lastElementChild.style.display = 'block';
            tar.parentNode.lastElementChild.previousElementSibling.style.display = 'none';
        }

    } */




    //点击标题上的按钮 让下面的ul标签闭合或者展开
    var catalogCataPs = catalogCata.getElementsByTagName('p');
    catalogCataPs[3].lastElementChild.innerHTML = '&#xeb21;';
    catalogCataPs[4].lastElementChild.innerHTML = '&#xeb21;';
    for (var i = 0; i < catalogCataPs.length; i++) {
        catalogCataPs[i].tet = 1;
        catalogCataPs[3].tet = 2;
        catalogCataPs[4].tet = 2;
        catalogCataPs[i].onclick = function () {
            if (this.tet == 1) {
                this.nextElementSibling.style.display = 'none';
                this.lastElementChild.innerHTML = '&#xeb21;'
                this.tet = 2;
            } else {
                this.nextElementSibling.style.display = 'block';
                this.lastElementChild.innerHTML = '&#xeb24;'
                this.tet = 1;
            }

        }

    }

    //点击展开全部按钮 上面的视频播放列表全部展开

    var btn = document.getElementById('btn')
    btn.onclick = function () {
        for (var i = 0; i < catalogCataUl.length; i++) {
            catalogCataUl[i].style.display = 'block';
            catalogCataPs[i].lastElementChild.innerHTML = '&#xeb24;'

            catalogCataPs[i].tet = 1;
        }

    }



}